window.onload = function(){
    //配置
    var config = {
        vx: 4,//点x轴速度,正为右，负为左
        vy:  4,//点y轴速度
        height: 2,//点高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,//点个数
        color: "100, 100, 100",//点颜色
        stroke: "50,50,50",//线条颜色
        dist: 6000,//点吸附距离
        e_dist: 20000,//鼠标吸附加速距离
        max_conn: 10//点到点最大连接数
    }
    //调用
    CanvasParticle(config,"mydiv");
}
function jiage(){
    let p =document.querySelector(".price")
    let span = document.querySelector(".dj")
    let lis = document.querySelectorAll(".right-item")
lis.forEach(function(li,i){
    li.addEventListener("click",function(){
        lis.forEach(function(l){
            l.classList.remove("on")
        })
        li.classList.add("on")
        let total = li.getAttribute("total")
        let uprice =li.getAttribute("uprice")
        // console.log(total,uprice);

        p.textContent = "￥"+ total
        span.textContent ="约" +uprice + "/次"
    })
})
}
jiage()

// 选项卡

function xxk (){
    //获取所有的li
let  lis = document.querySelectorAll(".caidan-item")
//获取所有内容
let cons = document.querySelectorAll(".zuo")

//批量注册点击事件
 lis.forEach(function(li,i){
     li.addEventListener("click",function(){
        //排他
        lis.forEach(function(a){
            a.classList.remove("on")
        })
        //给当前点击的li增加样式
        this.classList.add("on")
        //遍历所有的内容
        cons.forEach(function(b){
            b.classList.remove("active")
        })
        //切换到对应的内容
        cons[i].classList.add("active")
     })
 })
}
xxk()